import { Tabs, TabItem } from '@aws-amplify/ui-react';
import { Example, ExampleCode } from '@/components/Example';

<Example>
<ExampleCode>
```jsx
import React, { useCallback, useEffect } from 'react';
import { Button, Text, View } from 'react-native';

import { Amplify, Notifications } from 'aws-amplify';
import {
  useInAppMessaging,
  withInAppMessaging,
} from '@aws-amplify/ui-react-native';

import config from './aws-exports';

const { InAppMessaging } = Notifications;

Amplify.configure(config);

const CustomBannerMessage = (props) => {
  return (
    <View
      style={{
        alignItems: 'center',
        backgroundColor='teal',
        borderRadius: 4,
        padding: 16,
        position: 'absolute',
      }}
    >
      <Text>{props.header.content}</Text>
      <Button onPress={props.onClose} title="Close!" />
    </View>
  );
};

function App() {
  const { displayMessage } = useInAppMessaging();

  useEffect(() => {
    // sync remote in-app messages
    InAppMessaging.syncMessages();
  }, []);

  const displayCustomBannerMessage = useCallback(
    () =>
      displayMessage({
        content: [{ header: { content: 'Hello World!' } }],
        id: 'Custom message',
        layout: 'TOP_BANNER',
      }),
    [displayMessage]
  );

  // display custom message component on initial render
  useEffect(displayCustomBannerMessage, [displayCustomBannerMessage]);

  return (
    <Button 
      onPress={displayCustomBannerMessage}
      title="Display Custom Banner Message"
    />
  );
}

export default withInAppMessaging(App, {
  components: { BannerMessage: CustomBannerMessage },
});
``` 
</ExampleCode>
</Example>